<template>
  <div>
    <el-container style="background-color: #fff;">
      <el-header>
        <el-row>
          <el-col :offset="7" :span="10">
            <div style="text-align: left" class="logo">
              <img src="@/assets/image/dvadmin-black.png" alt="" style="height: 100%;width: 100%;">
            </div>
            <div style="text-align: right">
              <el-button type="success" size="mini" icon="el-icon-user-solid" @click="$router.push('/login')">请登录</el-button>
              <el-button type="primary" size="mini" icon="el-icon-s-promotion" @click="$router.push('/clientRenew')">套餐说明</el-button>
            </div>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
        <div class="section page-banner apply-banner">
          <div class="container">
            <el-row class="caption">
              <el-col :span="12" :offset="6">
                <h1>免费申请试用</h1>
                <h4>欢迎留下您的联系信息，我们会有专业客户经理与您联系，<br>
                  一对一为您详细介绍相关产品和服务。</h4>
              </el-col>
            </el-row>
          </div>
        </div>
        <div style="text-align: left;margin-top: 20px;">
          <el-row>
            <el-col :offset="8" :span="8">
              <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="公司名称" prop="name">
                  <el-input v-model="ruleForm.name" placeholder="请输入公司名称"></el-input>
                </el-form-item>
                <el-form-item label="称呼" prop="appellation">
                  <el-input v-model="ruleForm.appellation" placeholder="请输入称呼"></el-input>
                </el-form-item>
                <el-form-item label="手机" prop="phone">
                  <el-input v-model="ruleForm.phone" placeholder="请输入手机"></el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="code">
                  <el-input
                    type="number"
                    v-model="ruleForm.code"
                    placeholder="请输入验证码"
                  >
                    <el-button slot="suffix" type="primary" size="mini" style="border: none;" @click="sendCode"
                               :disabled="!show">
                      获取验证码
                      <span v-show="!show" class="count">({{ count }}s)</span>
                    </el-button>
                  </el-input>
                </el-form-item>
                <el-form-item label="登录密码" prop="password">
                  <el-input v-model="ruleForm.password" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="verify_password">
                  <el-input v-model="ruleForm.verify_password" placeholder="请确认密码"></el-input>
                </el-form-item>
                <el-form-item style="text-align: center;">
                  <el-button type="danger" @click="submitForm('ruleForm')" style="width: 200px;">提交申请</el-button>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import * as api from './api'

export default {
  name: 'tenantsRegister',
  data () {
    function isvalidPhone (phone) {
      const reg = /^1([38][0-9]|4[014-9]|[59][0-35-9]|6[2567]|7[0-8])\d{8}$/
      return reg.test(phone)
    }

    // 自定义验证
    const validPhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入电话号码'))
      } else if (!isvalidPhone(value)) { // 判断用户输入的值是否符合规则
        callback(new Error('请输入正确的11位手机号码'))
      } else {
        callback()
      }
    }
    return {
      apply_bg: 'url(' + require('@/assets/image/dvadmin-black.png') + ')',
      ruleForm: {
        name: '',
        appellation: '',
        phone: '',
        code: '',
        password: '',
        verify_password: ''

      },
      rules: {
        name: [
          { required: true, message: '请输入公司名称', trigger: 'blur' }
        ],
        appellation: [
          { required: true, message: '请输入称呼', trigger: 'blur' }
        ],
        phone: [
          { required: true, trigger: 'change', validator: validPhone }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { min: 6, max: 6, message: '长度在6个数字' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        verify_password: [
          { required: true, message: '请确认密码', trigger: 'blur' }
        ]
      },
      timer: '',
      count: null,
      show: true
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const data = JSON.parse(JSON.stringify(this.ruleForm))
          data.password = this.$md5(data.password)
          data.verify_password = this.$md5(data.verify_password)
          api.applyForSubmit(data).then(res => {
            this.$message.success('申请成功，请耐心等待审核通过!')
          })
        } else {
          return false
        }
      })
    },
    // 发送验证码
    sendCode () {
      this.$refs.ruleForm.validateField('phone', valid => {
        if (!valid) {
          // 发送验证码
          if (!this.timer) {
            // 这里写请求
            api.sendLoginSms({ phone: this.ruleForm.phone }).then(res => {
              this.count = 60
              this.show = false
              this.timer = setInterval(() => {
                if (this.count > 0 && this.count <= 60) {
                  this.count--
                } else {
                  this.show = true
                  clearInterval(this.timer) // 清除定时器
                  this.timer = null
                }
              }, 1000)
              this.$message.success('发送成功')
            })
          }
        }
      })
    }

  }

}
</script>

<style lang="scss">
html #app, body #app {
  background: #fff !important;
}
</style>
<style scoped lang="scss">
.logo {
  width: 140px;
  height: 50px;
  position: absolute;
  top: 5px;
}

.theme-d2 {
  background: #fff !important;
}

.section.page-banner {
  padding-top: 30px;
  padding-bottom: 30px;
  background-size: cover;
}

.section.page-banner.apply-banner {
  background-image: url('./apply_bg.jpeg');
  text-align: center;
}

.container {
  width: 970px;
  max-width: none !important;
}

.el-header {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  background: #fff;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  color: #333;
  text-align: center;
  margin: 0;
  padding: 0;
}

.caption {
  padding-top: 30px;
  color: #737373;
  font-size: 16px;
  background-color: rgba(255, 255, 255, 0.7);
  filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#70FFFFFF, endColorstr=#70FFFFFF);
  padding-bottom: 30px;

  h1 {
    color: #F34541;
    margin-bottom: 20px;
    font-size: 48px;
  }

  h4 {
    font-size: 18px;
    margin-top: 10px;
    margin-bottom: 10px;
  }
}
</style>
